<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  </head>
  <body>
    <div class="" id="view2">

    </div>
    <div id="view">
      {{name}} ---- {{age}}
      <button id="button" type="button" click="change" name="button">change</button>
      <button id="button2" type="button" click="change" name="button">change</button>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el:"#view",
        data:{
          name:"scy",
          age:"25"
        }
      });

      const obj = {
        data:{
          name:"3"
        }
      };
      Object.defineProperty(obj, "name", {
        get(){
          return this.data.name;
        },
        set(v){
          this.data.name = v;
          view2.innerHTML = obj.name;
        }
      })
      button.onclick=function () {
        vm.name="sssdd";
      }
      button2.onclick=function () {
        obj.name = "ppppppppppppp";
      }

      let count = 3;
      view2.innerHTML = count;
      let timer = setInterval(()=>{
        --count;
          view2.innerHTML = count;
        if (count === 0) {
          clearTimeout(timer);
          view2.innerHTML = "change....";
        }
      },1000);

    </script>
  </body>
</html>
